<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>两张对比图</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* html,
    body {
        width: 100%;
        height: 100%;
    } */

    .box{
        position: relative;
    }
    .box img{
        width: 400px;
    }
   .box>div{     /* 改变大小的img外层套一层div是不直接改变img宽度，导致变形 */
        position: absolute;
        bottom: 0;
        left: 0;
        width: 200px;
        display: inline-block;
        overflow: hidden;
        filter: saturate(0);  /* 一张图片加滤镜以区分开来 */
         resize: horizontal; /* 横向可以改变宽度 */
        max-width: 400px;  /* 以防拖动超过图片宽度 */
    }
    .box>div::before{  /* 滑块的样式 */
        content: "";
        width: 10px;
        height: 10px;
        background-color: slategrey;
        position: absolute;
        bottom: 0;
        right: 0;
        cursor: ew-resize;
    }
</style>

<body>
    <div class="box">
        <img src="./img/demo8-0.jpg" alt="">
        <div>
            <img src="./img/demo8-0.jpg" alt="">
        </div>
    </div>
</body>
<script>
</script>
</html>